<template>
  <div class="wrap">
    <div class="topTitle">活动管理/团队奖励</div>
    <div class="searchTitle">
      <div class="list" style="margin-bottom:20px">
        <div class="name">机构ID</div>
        <el-input
          style="width:300px"
          v-model="form.officeUid"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="list" style="margin-bottom:20px">
        <div class="name">机构名称</div>
        <el-input
          style="width:300px"
          v-model="form.officeName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="list" style="margin-bottom:20px">
        <div class="naem">机构电话</div>
        <el-input
          style="width:300px"
          v-model="form.phone"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <!-- <div class=""></div>
      <div class="list" style="margin-bottom:20px">
        <div class="name">机构类型</div>
        <el-select style="width:300px" v-model="form.oType" placeholder="请选择">
          <el-option
            v-for="item in optionsMemberType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>-->
      <div class="list" style="margin-bottom:20px">
        <div>活动名称</div>
        <el-input
          v-model="form.activeName"
          style="width:300px"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="list" style="margin-bottom:20px">
        <div>状态</div>
        <el-select
          v-model="form.status"
          style="width:300px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="list">
        <div>活动时间</div>
        <el-date-picker
          value-format="yyyy-MM-dd"
          style="width:300px"
          v-model="form.acTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <!-- <div class="list"></div>
      <div class="list"></div>-->
      <el-col class="boxer">
        <el-button @click="clears">重置</el-button>
        <el-button type="primary" style="margin-right:10px" @click="search"
          >搜索</el-button
        >
      </el-col>
    </div>
    <div class="line" style="margin-bottom:30px">
      <h3 class="textTitle">活动列表</h3>
      <el-button type="primary" @click="add">添加活动</el-button>
    </div>
    <div style="height:10px"></div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;margin-top:20px"
      :header-cell-style="{ background: '#DCDCDC', color: '#222' }"
      @select="onRowClick"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="officeUid"
        label="机构ID"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="officeName"
        label="机构名称"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="机构电话"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="activeName"
        label="活动名称"
        min-width="200"
      ></el-table-column>
      <el-table-column
        prop="channelName"
        label="品牌"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="productNo"
        label="型号"
        min-width="150"
      ></el-table-column>
      <el-table-column label="有效期" min-width="200">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.startDate }}</span>
            <span>{{ scope.row.endDate }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="200">
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
          &nbsp;
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >&nbsp;
          <span @click="catDetails(scope.row)">详情</span>
          &nbsp;
          <span @click="stopUser(scope.row)">停用</span>
          &nbsp;
          <!-- <el-button size="mini" type="primary">下载</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="btn" style="margin-top: 20px;">
      <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
      <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
      <!-- <el-button style="float:left" @click="quan">全选</el-button> -->
      <div
        class="filter-container"
        style="float: left; text-align: left; font-size: 13px; color: rgb(31, 165, 243); cursor: pointer;margin-left: 10px;
    margin-top: 10px; width: auto"
      >
        <el-checkbox v-model="checkedAll" @change="quan">全选</el-checkbox>
      </div>
      <div class="exports">批量导出</div>
      <el-pagination
        background
        style="text-align: right;"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.number"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40, 50]"
        :total="totalNum"
      ></el-pagination>
    </div>
    <div class="info">
      
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      total: "",
      form: {
        officeUid: "", // 机构ID
        officeName: "", //机构名称
        phone: "", //电话
        oType: 0, //机构类型
        activeName: "", //活动名称
        acState: "", //活动状态
        acTime: "", //活动时间
        status: "",
        page: 1,
        number: 10,
        startDate: "", //活动开始时间
        endDate: "" //活动结束时间
      },
      checkedAll:false,
      totalNum:20,
      // checkedAll: true,
      // 机构类型
      optionsMemberType: [
        {
          value: 0,
          label: "OEM"
        },
        {
          value: 1,
          label: "小oem"
        },
        {
          value: 2,
          label: "贴牌"
        }
      ],
      memberType: "",
      //   机构类型结束‘
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 0,
          label: "正常"
        },
        {
          value: 1,
          label: "停用"
        }
      ],
      value: "",
      //  日期选怎开始
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      // 日期选择结束
      tableData: [
        {
          officeUid: "5215214520012",
          officeName: "阿里巴巴",
          province: "phone",
          activeName: "大家好",
          channelName: "上海市普陀区金沙江路 1518 弄",
          productNo: "52455",
          startDate: "2020-03-23",
          endDate: "2020-04-25",
          status: "1"
        },
        {
          officeUid: "5215214520012",
          officeName: "阿里巴巴",
          province: "phone",
          activeName: "大家好",
          channelName: "上海市普陀区金沙江路 1518 弄",
          productNo: "52455",
          startDate: "2020-03-23",
          endDate: "2020-04-25",
          status: "1"
        },
        {
          officeUid: "5215214520012",
          officeName: "阿里巴巴",
          province: "phone",
          activeName: "大家好",
          channelName: "上海市普陀区金沙江路 1518 弄",
          productNo: "52455",
          startDate: "2020-03-23",
          endDate: "2020-04-25",
          status: "1"
        },
        {
          officeUid: "5215214520012",
          officeName: "阿里巴巴",
          province: "phone",
          activeName: "大家好",
          channelName: "上海市普陀区金沙江路 1518 弄",
          productNo: "52455",
          startDate: "2020-03-23",
          endDate: "2020-04-25",
          status: "1"
        },
        {
          officeUid: "5215214520012",
          officeName: "阿里巴巴",
          province: "phone",
          activeName: "大家好",
          channelName: "上海市普陀区金沙江路 1518 弄",
          productNo: "52455",
          startDate: "2020-03-23",
          endDate: "2020-04-25",
          status: "1"
        }
      ]
    };
  },
  created() {
    axios
      .post("/api/active/promotionActiveList", { page: 1, number: 10 })
      .then(res => {
        console.log("成了");
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
      .catch(err => {
        console.log(err);
      });
    // 回显
    // axios.post("/api/active/queryUpdateActive",{activeUid:uid})
    // .then(res=>{
    //   console.log("下面是会先")
    //   console.log(res)
    // })
    // .catch(err=>{
    //   console.log(err)
    // })
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    //
    add() {
      this.$router.push({
        path: "recommendActive"
      });
    },
    quan() {
      if (this.checkedAll) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //上一页
    prev(val) {
      // console.log(val);
      this.form.page = val;
    },
    //下一页
    next(val) {
      // console.log(val);
      this.form.page = val;
    },
    qiehuan(val) {
      // console.log("ASdfas")
      this.form.page = val;
      // console.log(val);
    },
    onRowClick(val) {
      console.log("选中打印");
      console.log(val);
    },
    search() {
      console.log(this.form);
      this.form.startDate = this.form.acTime[0];
      this.form.endDate = this.form.acTime[1];
      axios
        .post("/api/active/promotionActiveList", this.form)
        .then(res => {
          console.log("成了");
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    clears() {
      this.form = {
        officeUid: "", // 机构ID
        officeName: "", //机构名称
        phone: "", //电话
        oType: 0, //机构类型
        activeName: "", //活动名称
        acState: "", //活动状态
        acTime: "", //活动时间
        status: "",
        page: 1,
        number: 10,
        startDate: "", //活动开始时间
        endDate: "" //活动结束时间
      };
    },
    edit(val) {
      console.log(val.activeUid);
      // let uid = val.uid
      // console.log(uid)
      // console.log(uid)
      let uid = val.activeUid;
      this.$router.push({
        path: "recommendActive",
        query: {
          uid: uid
        }
      });
    },
    catDetails(val) {
      console.log("查看詳情");
      let uid = val.activeUid;
      this.$router.push({
        path: "recommendActive",
        query: {
          isSshow: true,
          shows: false,
          uid: uid
        }
      });
    },
    stopUser(num) {
      let uid = num.activeUid;
      let status = num.status;
      axios
        .post("/api/active/changeStatus", { uid: uid, status: status })
        .then(res => {
          console.log(res);
          axios
            .post("/api/active/promotionActiveList", { page: 1, number: 10 })
            .then(res => {
              console.log("成了");
              console.log(res);
              this.tableData = res.data.data;
              this.total = res.data.total;
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(err => {
          console.log(err);
        });
      console.log("停用");
    }
  }
};
</script>

<style scoped>
.wrap {
  width: 96%;
  margin: 0 auto;
}
.searchTitle {
  display: flex;
  flex-wrap: wrap;
  background: #f9fafc;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  padding-left: 40px;
}
.list {
  display: flex;
  align-items: center;
  width: 450px;
}
.list > div:first-of-type {
  width: 90px;
  /* display: flex; */
  align-items: center;
  /* justify-content: right; */
  text-align: right;
  padding-right: 10px;
}
.exports {
  color: #409eff;
  margin-left: 20px;
  margin-top: 10px;
  float: left;
}
.btn {
  align-items: center;
}
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
.line {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  border-bottom: 1px solid #ebeef5;
}
.topTitle {
  font-size: 16px;
  color: #2f2c29;
  margin-top: 40px;
  margin-bottom: 20px;
}
.textTitle {
  font-size: 18px;
  color: #2f2c29;
  border-bottom: 2px solid #606266;
}
.boxer {
  padding-right: 20px;
  float: right;
}
.boxer > .el-button {
  width: 100px;
  float: right;
}
</style>
